<template>
	<div>
		<jk-table ref="jkTable" :loading="tableLoading" :data="dataList" :height="tableHeight + 20">
			<vxe-column
				v-for="(item, index) in tableColumnList"
				:key="index"
				:title="item.title"
				:align="item.align"
				:field="item.keyName"
				:sortable="item.sortable"
				:fixed="item.fixed ? item.fixed : ''"
				:min-width="item.minWidth"
				:width="item.width"
			>
				<template slot-scope="scope">
					<el-tag v-if="item.keyName === 'faultState'" :type="scope.row.faultState ? 'danger' : 'primary'" class="width-100-percent">{{ scope.row.faultState ? '已呼叫' : '正常' }}</el-tag>
					<span v-else>{{ scope.row[item.keyName] }}</span>
				</template>
			</vxe-column>
			<vxe-column title="操作" align="center" fixed="right" :width="120">
				<template slot-scope="scope">
					<div>
						<el-button :disabled="!!scope.row.faultState" type="danger" size="mini" icon="el-icon-phone" @click="onCallBtn(scope.row)">呼叫</el-button>
					</div>
				</template>
			</vxe-column>
		</jk-table>
	</div>
</template>
<script>
    export default {
        props: {
            tableColumnList: {
                type: Array,
                default() {
                    return [];
                }
            },
            dataList: {
                type: Array,
                default() {
                    return [];
                }
            },
            tableHeight: {
                type: Number,
                default: null
            }
        },
        data() {
            return {
                tableLoading: false
            };
        },
        methods: {
            onCallBtn(e) {
                this.$emit('on-call', e);
            }
        }
    };
</script>
